<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>主界面</title>
    <meta charset="UTF-8">
    <script type="text/javascript " th:src="@{../js/jquery-1.11.1-min.js}"></script>
    <script type="text/javascript" th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
    <link th:href="@{../bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
    <link th:href="@{../css/wangEditor.css}" rel="stylesheet">
    <!--<script th:src="@{../js/wangEditor.js}"></script>-->
    <link th:href="@{../css/wangEditor2.min.css}" rel="stylesheet">
    <script th:src="@{../js/wangEditor2.min.js}"></script>
    <link th:href="@{../css/css-1.css}">
    <script th:src="@{../js/wangEditor3.min.js}"></script>

</head>

<body style="background-color: #eeeeee">
<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">BBS</a>
        </div>
        <div class="col-lg-6">
            <ul class="nav navbar-nav">
                <li class="active"><a th:href="@{/user/main}">首页</a></li>
                <li><a href="../question.html">问答</a></li>
                <li><a href="../help.html">帮助中心</a></li>
                <li><a href="../mine.html">我的</a></li>
                <li>
                    <form class="form-inline" style="margin-top:8px ">
                        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                    </form>
                </li>
            </ul>

        </div>

        <div class="col-lg-2 col-lg-offset-2" style="width: 20%;overflow: hidden">
            <ul class="nav navbar-nav">
                <li th:if="*{session.user.name != null}"><a th:text="'欢迎你,'+ *{session.user.name}"
                                                            style="color: red"></a></li>
                <li><a href="javascript:void(0)" class="logoutBtn">注销</a></li>
            </ul>
        </div>
    </div>

</nav>


<div class="container replace" style=" padding:20px;background-color: #ffffff;width: 80%">

    <div class="row">
        <div class="col-lg-12 ">
            <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 置顶 </h2>
            <hr>
        </div>

        <!--  置顶的topic-->
        <div id="topics-top" th:each="topicUser:${topicUserMapTop}" class="col-lg-offset-01">
            <div class="media-left">
                <a href="#">
                    <img width="60px" class="media-object img-circle picset" th:src="${topicUser.value.profilePhoto}">
                </a>
            </div>
            <div class="media-body col-lg-offset-00">
                <div style="color:#C9CDD4; margin-bottom: 10px">
                    <span>[[${topicUser.value.name}]]</span>
                    <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
                    <span>发表时间： [[${topicUser.key.createTime}]]</span>
                    <span style="margin-left: 20px; " class="glyphicon glyphicon-eye-open align-middle">
                        </span><span class="align-middle"
                                     style="vertical-align: auto">[[${topicUser.key.browseCount}]]</span>
                    <span style="margin-left: 20px;"
                          class="glyphicon glyphicon-comment">[[${topicUser.key.commentCount}]]</span>
                    <span class=" glyphicon glyphicon-thumbs-up"
                          style="margin-left: 20px;">[[${topicUser.key.thumbsCount}]]</span>
                    <span class=" glyphicon  glyphicon-star"
                          style="margin-left: 20px;">[[${topicUser.key.collectionCount}]]</span>

                </div>
                <div>
                        <span style="margin-top: 10px;">
                            <h4 class="media-heading" style="font-size: 20px;">
                                <a th:href="@{'/article/getTopicById?id='+${topicUser.key.id}}">[[${topicUser.key.title}]]</a>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span th:if="${topicUser.key.status == '10'||topicUser.key.status == '11'}"
                                          class="top">置顶</span>
                                <span th:if="${topicUser.key.status == '01'||topicUser.key.status == '11'}"
                                      class="essence">精华</span>
                            </h4>
                        </span>
                </div>
                <div class="topic-content" th:utext="${topicUser.key.content}"
                     style="max-height:100px;overflow:hidden;padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;color: #86909C;">

                </div>
            </div>
            <hr>
        </div>

        <div class="col-lg-12">
            <h2><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 最新 </h2>
            <hr>
        </div>
        <!-- 未置顶的topic -->
        <div id="topics" th:each="topicUser:${topicsAndUser}" class="col-lg-offset-01">
            <div class="media-left">
                <a href="#">
                    <img width="60px" class="media-object img-circle picset" th:src="${topicUser.value.profilePhoto}">
                </a>
            </div>
            <div class="media-body col-lg-offset-00">
                <div style="color:#C9CDD4; margin-bottom: 10px">
                    <span>[[${topicUser.value.name}]]</span>
                    <span style="margin: 5px;display: inline-block;color: #e2b46e;background-color:#f8e7c4;">白金会员</span>
                    <span>发表时间： [[${topicUser.key.createTime}]]</span>
                    <span style="margin-left: 20px; " class="glyphicon glyphicon-eye-open align-middle">
                        </span><span class="align-middle"
                                     style="vertical-align: auto">[[${topicUser.key.browseCount}]]</span>
                    <span style="margin-left: 20px;"
                          class="glyphicon glyphicon-comment">[[${topicUser.key.commentCount}]]</span>
                    <span class=" glyphicon glyphicon-thumbs-up"
                          style="margin-left: 20px;">[[${topicUser.key.thumbsCount}]]</span>
                    <span class=" glyphicon  glyphicon-star"
                          style="margin-left: 20px;">[[${topicUser.key.collectionCount}]]</span>
                </div>
                <div>
                        <span style="margin-top: 10px;">
                            <h4 class="media-heading" style="font-size: 20px;">
                                <a style="color: black" th:href="@{'/article/getTopicById?id='+${topicUser.key.id}}">[[${topicUser.key.title}]]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                     <span th:if="${topicUser.key.status == '10'||topicUser.key.status == '11'}"
                                           class="top">置顶</span>
                                  <span th:if="${topicUser.key.status == '01'||topicUser.key.status == '11'}"
                                        class="essence">精华</span>
                            </h4>
                        </span>
                </div>
                <div class="topic-content" th:utext="${topicUser.key.content}"
                     style="max-height:100px;overflow:hidden;padding:5px;margin: 0px 50px 0 0;font-size: 15px;line-height: 28px;font-weight: normal;text-decoration: none;color: #86909C;">
                </div>
            </div>
            <hr>
        </div>
    </div>
    <div>
        <div style="float: right;margin-right: 50px;line-height: 36px;font-size: 14px;" class="pg">
            <span class="count">共[[${pageInfo.total}]]条</span>
            <a th:if="${pageInfo.hasPreviousPage}" class="page-next"
               th:href="@{../user/main(pageNum=${pageInfo.pageNum}-1,pageSize=${pageInfo.pageSize})}">上一页</a>
            <label class="lable-page">
                <span title="">每页显示</span>
                <!--<input onkeydown="if(event.keyCode==13) {(this.value);}" class="input-page page-num">-->

                <input class="input-page page-size"
                       title="输入每页显示记录数，按回车跳转" th:value="${pageInfo.pageSize}">
                <span title="">条</span>
            </label>

            <label class="lable-page">
                <!--todo:按下回车跳转-->
                <input class="input-page page-num"
                       title="输入页码，按回车跳转" th:value="${pageInfo.pageNum}" size="2">
                <span th:text="|/共${pageInfo.pages}页|"></span>
            </label>
            <a th:if="${pageInfo.hasNextPage}" class="page-next"
               th:href="@{../user/main(pageNum=${pageInfo.pageNum+1},pageSize=${pageInfo.pageSize})}">下一页</a>

        </div>
    </div>
</div>

</div>

<div class="container content color" style="width: 80%;background-color: #ffffff;margin-top: 10px">
    <form role="form" style="margin-top: 20px;">
        <div class="col-lg-5 form-group" style="height: 20px">
            <input type="text" class="form-control" placeholder="标题" id="topicTitle">
        </div>
        <div class="col-lg-12 form-group" style="margin-top: 10px">
            <div id="editor"></div>
        </div>
        <div class="form-group col-lg-12">
            <div class="col-lg-offset-11 col-lg-1">
                <button type="submit" id="releaseBtn" class="btn btn-default btn-primary">发布</button>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer" style="margin-top: 10px">
    <div align="center"><a>Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
</div>
</body>


<script type="text/javascript" th:inline="javascript">
    $(function () {
        $("button").click(function (ev) {
            ev.preventDefault();
        })
        $("#releaseBtn").click(function () {
            releaseTopic();
        })
        $(".logoutBtn").click(function () {
            logout();
        })
        // created()
    })

    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            window.location.href = "../user/main?pageNum=" + $(".page-num").val() + "&pageSize=" + $(".page-size").val();
        }
    })

    function logout() {
        $.ajax({
            url: "logout",
            type: "get",
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    window.location.href = "login.html"
                } else {
                    $.alert("注销失败")
                }
            }
        })
    }

    // function pageList(pageNum) {
    //     let pageSize = $.trim($(".page-size").val());
    //     console.log('pagesize:'+pageSize);
    //     $.ajax({
    //         url: "../user/main",
    //         type: "post",
    //         data: {
    //             "pageNum": parseInt(pageNum),
    //             "pageSize": parseInt(pageSize),
    //         },
    //         dataType: "html",
    //         success: function (data) {
    //             console.log('success');
    //             console.log(data);
    //             window.location.href = "main"
    //
    //
    //         },
    //         error:function(XMLHttpRequest, textStatus, errorThrown){
    //             debugger
    //             // 状态码
    //             console.log(XMLHttpRequest.status);
    //             // 状态
    //             console.log(XMLHttpRequest.readyState);
    //             // 错误信息
    //             console.log(textStatus);
    //         },
    //     })
    // }

    function created() {
        if (window.name == "") {
            $.ajax({
                url: "../article/pageList",
                type: "post",
                data: {
                    "pageNum": [[${pageNum}]],
                    "pageSize": [[${pageSize}]],
                }
            })
            window.name = "isReload"; // 在首次进入页面时给window.name设置一个固定值
            location.reload();
        } else if (window.name == "isReload") {
            console.log('页面被刷新')
        }
    }


</script>
<style>
    * {
        word-wrap: break-word;
        margin: 0;
        padding: 0;
    }

    label {
        cursor: default;
    }

    .pg a {
        border-radius: 3px;
        background-color: #F2F3F5;
        padding: 0px 12px;
        display: inline;
        background-repeat: no-repeat;
        float: left;
        height: 34px;
        color: black;
        margin-left: 4px;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
    }

    .input-page {
        width: 30px;
        margin-bottom: 3px;
        *margin-bottom: 0px;
        border: #F2F3F5 1px solid;
        position: relative;
        top: -1px;
        text-align: center;
        color: #4E5969;
        height: 20px;
        padding: 4px 3px;
        font-size: 14px;
    }

    .page-next {
        border-radius: 3px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0px;
    }

    .count {
        border-radius: 3px;
        padding-bottom: 0px;
        background-color: #F2F3F5;
        padding-left: 12px;
        padding-right: 12px;
        display: inline;
        background-repeat: no-repeat;
        float: left;
        height: 34px;
        color: #4E5969;
        margin-left: 4px;
        overflow: hidden;
        text-decoration: none;
        padding-top: 0px;
    }

    .lable-page {
        border-radius: 3px;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #F2F3F5;
        padding-left: 12px;
        padding-right: 12px;
        display: inline;
        background-repeat: no-repeat;
        float: left;
        height: 34px;
        color: #4E5969;
        margin-left: 4px;
        overflow: hidden;
        text-decoration: none;
    }

    .essence {
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 10px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #F76560;
        position: relative;
        top: -1px;
    }

    .top {
        display: inline-block;
        vertical-align: middle;
        padding: 3px 4px;
        margin-right: 1px;
        font-size: 10px;
        line-height: 15px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        color: #fff;
        background-color: #57A9FB;
        position: relative;
        top: -1px;
        max-height: 100px;
        margin-left: -20px;

    }

    .topic-content img {
        max-width: 100px !important;
    }

</style>
<!-- 引入 css -->
<script type="text/javascript" th:inline="javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    editor.create()
    this.editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ]


    //配置多种语言--就是将编辑器原本文字配置成你需要的文字、
    //***链接文字一定要在链接的上面

    function releaseTopic() {
        var topicTitle = $.trim($("#topicTitle").val());
        var topicContent = editor.txt.html();
        if (topicTitle == "") {
            alert("请输入标题");
            return false;
        }
        if (topicContent == "") {
            alert("请输入内容");
            return false;
        }

        $.ajax({
            url: "/article/releaseTopic",
            data: {
                "topicTitle": topicTitle,
                "topicContent": topicContent
            },
            type: "post",
            dataType: "json",
            success: function (data) {
                alert(data)
                if (data.success) {
                    window.location.href = "/user/main"
                } else {
                    alert("发表失败")
                }
            }
        })
    }

</script>
</html>